<template>
  <div>
    <div class="title">
      <ul>
        <li @click="GetBack">
          <img src="../../assets/images/goback.png" alt="" />
        </li>
        <li>个人资料</li>
      </ul>
    </div>
    <div class="photo">
      <div>头像</div>
      <div class="photo-img"><img src="../../assets/banner.jpg" alt="" /></div>
      
     
     
    </div>
    <div class="nickname">
      <div>昵称</div>
      <div><img src="../../assets/images/next.png" alt="" /></div>
      <div>指尖联盟123</div>
    </div>

    <div class="sex">

      <div>性别</div> 
      <div @click="cutsex"><img src="../../assets/images/next.png" alt="" /></div>
      <div >{{sex}}</div>
    </div>
      <div v-show="displaysex" class='radio'>
      
          <i  @click=' radio(index)' v-for='(item,index) in list' :key="index">{{item}}</i>
      
      </div>

    <div class="birth">
      <div>生日</div>
      <div><img src="../../assets/images/next.png" alt="" /></div>
    </div>
    <div class="location">
      <div>收货地址</div>
      <div><img src="../../assets/images/next.png" alt="" /></div>
    </div>
    
     
  </div>



</template>

<script>
export default {
  name: "set",
  data(){
     
       return{
            sex:'',
            
               list:['男','女'],
     displaysex:false
       
       }

  },
  methods: {
    GetBack() {
      this.$router.push("/set");
    },
    cutsex(){
      this.displaysex=!this.displaysex
    },
   radio(index){
     this.sex=this.list[index] 
   }
    
    
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  height: 50px;
  background-color: white;
}
ul {
  width: 100%;
}
ul li {
  float: left;
}
ul li:nth-child(1) {
  width: 19px;
  margin-left: 2%;
  margin-top: 3%;
  margin-bottom: 5%;
}
ul li:nth-child(2) {
  margin-left: 37%;

  font-size: 19px;

  line-height: 50px;
}
.photo {
  width: 100%;
  height: 80px;
  background-color: white;
  margin-top: 10px;
}
.photo img {
  width: 24px;
}
.photo-img img {
  width: 100%;
  height: 100%;

  border-radius: 50%;
}
.photo div:nth-child(1) {
  font-size: 20px;
  line-height: 80px;
  margin-left: 5%;
  float: left;
}
.photo div:nth-child(2) {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #808080;
  float: right;
  margin-right: 11%;
  margin-top: 3%;
}
.photo div:nth-child(3) {
  float: right;
  margin-right: -19%;
  margin-top: 6%;
}
.nickname {
  width: 100%;
  height: 60px;
  background-color: white;
  margin-top: 10px;
}
.nickname img {
  width: 24px;
}
.nickname div:nth-child(1) {
  float: left;
  margin-left: 5%;
  line-height: 60px;
  font-size: 20px;
}
.nickname div:nth-child(2) {
  float: right;
  margin-top: 4%;
  margin-right: 2%;
}
.nickname div:nth-child(3) {
  float: right;
  line-height: 60px;
  font-size: 20px;
}
.sex {
  width: 100%;
  height: 50px;
  background-color: white;
  margin-top: 5px;
}
.sex div:nth-child(1) {
  float: left;
  margin-left: 5%;
  line-height: 50px;
  font-size: 20px;
}
.sex div:nth-child(3) {
  float: right;
  line-height: 50px;
  font-size: 20px;
  margin-right: 2%;
}
.sex div:nth-child(2) {
  width: 24px;
  float: right;
  margin-top: 3%;
  margin-right: 3%;
}
.birth {
  width: 100%;
  height: 50px;
  background-color: white;
  margin-top: 5px;
}
.birth div:nth-child(1) {
  float: left;
  margin-left: 5%;
  line-height: 50px;
  font-size: 20px;
}
.birth div:nth-child(2) {
  width: 24px;
  float: right;
  margin-right: 3%;
  margin-top: 3%;
}
.location {
  width: 100%;
  height: 50px;
  background-color: white;
  margin-top: 5px;
}
.location div:nth-child(1) {
  float: left;
  margin-left: 5%;
  line-height: 50px;
  font-size: 20px;
}
.location div:nth-child(2) {
  width: 24px;
  float: right;
  margin-right: 3%;
  margin-top: 3%;
}
.radio{
  
  
  height:30px;

}
.radio i{
display: inline-block;
font-size:15px;
line-height: 30px;
text-align: center;
margin-left: 10%;
}
</style>